<template>
  <div class="myMore">
    <!-- <span>我的信息</span> -->
    <my-box>
      <!-- 标题 -->
      <template v-slot:title>
        <span style=" margin-left: 7px !important;">更多</span>
      </template>

      <template v-slot:mydiv class="mydiv">
        <div v-for="(item, index) in list" :key="index" @click="myHistory(item)">
          <van-icon :name="item.iconName" color="#39A9ED" size="0.7rem" />
          <li>{{ item.title }}</li>
        </div>

        <!-- 关于我们 -->
        <div>
          <router-link to="/AboutUs">
            <van-icon name="smile-o" color="#39A9ED" size="0.7rem" />
            <li>关于我们</li>
          </router-link>
        </div>
      </template>
    </my-box>
  </div>
</template>

<script>
import myBox from './myBox.vue'
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          type: 1,
          title: '我的投票',
          iconName: 'todo-list',
        },
        {
          id: 2,
          type: 2,
          title: '我发起的投票',
          iconName: 'todo-list',
        },
        {
          id: 3,
          type: 3,
          title: '失物记录',
          iconName: 'point-gift',
        },
        {
          id: 4,
          type: 4,
          title: '寻物记录',
          iconName: 'award',
        },
        {
          id: 5,
          type: 5,
          title: '转让记录',
          iconName: 'gold-coin',
        },
        {
          id: 6,
          type: 6,
          title: '借用记录',
          iconName: 'send-gift',
        },
        {
          id: 7,
          type: 7,
          title: '报修记录',
          iconName: 'shop',
        },
        {
          id: 8,
          type: 8,
          title: '购买记录',
          iconName: 'shopping-cart',
        },
        {
          id: 9,
          type: 9,
          title: '发表动态',

          iconName: 'fire',
        },
      ],
    }
  },

  methods: {
    myHistory(item) {
      const { title } = item
      const { type } = item
      this.$router.push({
        name: 'myAllHistory',
        query: {
          title,
          type,
        },
      })
    },
  },

  components: {
    myBox,
  },
}
</script>

<style scoped>
.mydiv {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.mydiv > div {
  width: 25%;
  text-align: center;
  padding: 3px 0 3px 0;
  box-sizing: border-box;
  margin-bottom: 4px;
}
.mydiv li {
  font-size: 12px;
  color: #000000;
}
</style>
